import getComponentRootDom from './getComponentRootDom.js';
import Icon from '@/components/Icon';
import sytles from './showMessage.module.less';
/**
 * 弹出消息
 * @param {string} content 消息内容
 * @param {string} type 消息类型 info error success warn
 * @param {number} duration 消息多久消失;单位ms
 * @param {HTMLElement} container 容器,消息会显示在该容器的正中间,如果不传,则显示到页面正中
 */
export default function (options = {}) {
    const content = options.content || "";
    const type = options.type || "info";
    const duration = options.duration || 2000;
    const container = options.container || document.body;
    // 创建消息元素
    const div = document.createElement('div');
    // 获取图标元素
    const iconDom = getComponentRootDom(Icon, { type });

    // 设置样式
    div.className = `${sytles.message} ${sytles['message-' + type]}`;

    // 设置内容
    div.innerHTML = `<span class="${sytles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`;

    // 容器是否改动过
    if (options.container) {
        if (getComputedStyle(container).position === 'static') {
            container.style.position = 'relative';
        }
    }


    // 将div加入container
    container.append(div)

    // 强行渲染一次,回到正常位置
    div.clientHeight;
    div.style.opacity = 1;
    div.style.transform = `translate(-50% ,-50%)`;
    // 等待一段时间消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%,-50%) translateY(-15px)`;
        div.addEventListener('transitionend', () => {
            // 移除消息dom
            div.remove();
            // 运行回调函数
            options.callback && options.callback();
        }, { once: true })
    }, duration);
}